<template>
  <div class="container" ref="mainCon">
    <el-row>
      <el-col style="position: relative">
        <!-- 考核模板 -->
        <topTitle titleText="考核模板"></topTitle>
        <el-button
          v-show="isShowAdd"
          class="commonBut saveBtn funComBut fr"
          icon="icon iconfont icontianjia"
          @click="toAdd"
          style="position: absolute; top: 7px; right: 24px"
        >
          <span class="opetareText">新建模板</span>
        </el-button>
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true">
          <el-col :lg="8" :xl="6">
            <el-form-item label="模板名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.name"
                placeholder="请输入模板名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1"  @click="searchList"  class="commonBtn"></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <exportBtn
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_JC_ZS_ASSESS_TEMPLATE"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column prop="name" label="模板名称" align="center" :formatter=formatTd></el-table-column>  -->
          <el-table-column prop="name" label="模板名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.name"
                :columnName="'name'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="score"
            label="考核总分"
            sortable="custom"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope"> {{ scope.row.score }}分 </template>
          </el-table-column>
          <el-table-column
            prop="total"
            label="考核事项"
            sortable="custom"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope"> {{ scope.row.total }}个 </template>
          </el-table-column>
          <el-table-column prop="illustration" label="模板说明" align="left">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.illustration"
                :columnName="'illustration'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaName"
            label="模板创建地区"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="statusName"
            label="模板状态"
            align="center"
            :formatter="formatTd"
          ></el-table-column>

          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            fixed="right"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  (scope.row.isThisLevel == 0 && isShowDetail) ||
                  (scope.row.status == 0 && isShowUpdate) ||
                  (scope.row.status == 0 && isShowUpdate) ||
                  isShowDetail ||
                  (scope.row.status == 0 && isShowDel) ||
                  (scope.row.status == 1 && isShowUpdate)
                "
              >
                <div v-if="scope.row.isThisLevel == 0 && isShowDetail">
                  <el-link type="primary" @click="toDetail(scope.row)"
                    >模板详情</el-link
                  >
                </div>
                <div v-else>
                  <el-link
                    v-show="isShowUpdate"
                    type="primary"
                    @click="startTemplateUiMethod(scope.row)"
                    v-if="scope.row.status == 0 && isShowUpdate"
                    >启用模板</el-link
                  >
                  <el-link
                    v-show="isShowUpdate"
                    type="primary"
                    @click="templateUiMethod(scope.row)"
                    v-if="scope.row.status == 0 && isShowUpdate"
                    >修改名称</el-link
                  >
                  <el-link
                    v-show="isShowDetail"
                    type="primary"
                    @click="toDetail(scope.row)"
                    v-if="isShowDetail"
                    >模板详情</el-link
                  >
                  <el-link
                    v-show="isShowDel"
                    type="primary"
                    @click="deleteTemplateUiMethod(scope.row)"
                    v-if="scope.row.status == 0 && isShowDel"
                    >删除模板</el-link
                  >
                  <el-link
                    type="primary"
                    @click="stopTemplateUiMethod(scope.row)"
                    v-if="scope.row.status == 1 && isShowUpdate"
                    >停用模板</el-link
                  >
                </div>
              </div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
    <!--新增修改模板-->
    <el-dialog
      :title="title"
      :visible.sync="templateDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
      class="oneColumnDialog"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="formRules"
        label-width="120px"
        style="padding-top: 8px"
      >
        <el-form-item label="模板名称：" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="模板说明：" prop="illustration">
          <el-input
            v-model="form.illustration"
            placeholder="请输入"
            clearable
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm" class="cancel">取 消</el-button>
        <el-button
          type="primary"
          class="save"
          @click="saveInfo"
          :disabled="saveInfoEnable"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--启动模板-->
    <!-- <el-dialog title="启用模板" :visible.sync="startTemplateDialog" width="30%" :close-on-click-modal="false" :modal-append-to-body="false"  :append-to-body="true">
      <span>确定启用模板吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="startTemplateDialog = false" class="cancel">取 消</el-button>
        <el-button type="primary"  class="save" @click="startTemplateDoMethod"  :disabled="startTemplateDoMethodEnable" >确 定</el-button>
      </div>
    </el-dialog> -->
    <!--停止模板-->
    <!-- <el-dialog title="停用模板" :visible.sync="stopTemplateDialog" width="30%" :close-on-click-modal="false" :modal-append-to-body="false"  :append-to-body="true">
      <span>确认停用模板吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stopTemplateDialog = false" class="cancel">取 消</el-button>
        <el-button type="primary" class="save"  @click="stopTemplateDoMethod"  :disabled="stopTemplateDoMethodEnable" >确 定</el-button>
      </div>
    </el-dialog> -->
    <!--删除模板-->
    <!-- <el-dialog title="删除模板" :visible.sync="deleteTemplateDialog" width="30%" :close-on-click-modal="false" :modal-append-to-body="false"  :append-to-body="true">
      <span>确认删除模板吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteTemplateDialog = false" class="cancel">取 消</el-button>
        <el-button type="primary"  class="save" @click="deleteTemplateDoMethod" :disabled="deleteTemplateDoMethodEnable" >确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'checkTemplate',
  mixins: [scrollTable],
  data() {
    return {
      firstLoadFlag: true,
      saveInfoEnable: false,
      startTemplateDoMethodEnable: false,
      stopTemplateDoMethodEnable: false,
      deleteTemplateDoMethodEnable: false,
      title: '新建模板',
      id: '',
      startTemplateTotal: 0,
      templateDialog: false,
      startTemplateDialog: false,
      stopTemplateDialog: false,
      deleteTemplateDialog: false,
      templateName: '',
      //表格数据
      tableList: [],
      requestUrl: 'api-gov/assesstemplate/expand/templatepage',
      isShow: false, //列表加载
      // loading: true,
      loading: false,
      filterField: {
        name: '',
      },
      form: {
        name: '',
        illustration: '',
        status: '',
      },
      formRules: {
        name: [
          { required: true, message: '模板名称不能为空', trigger: 'blur' },
        ],
        illustration: [
          { required: true, message: '模板说明不能为空', trigger: 'blur' },
        ],
      },
      isShowAdd: '',
      isShowUpdate: '',
      isShowDel: '',
      isShowDetail: '',
    }
  },
  activated() {
    if (this.firstLoadFlag) {
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    }
  },
  created() {
    if (this.firstLoadFlag) {
      this.firstLoadFlag = false
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    }
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:delete') > -1
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:detail') > -1
  },
  methods: {
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    toAdd() {
      this.title = '新建模板'
      this.templateDialog = true
      this.id = ''
      this.form.name = ''
      this.form.illustration = ''
      this.form.status = ''
    },
    startTemplateUiMethod(rowData) {
      //启用模板UI
      this.id = rowData.id
      this.startTemplateTotal = rowData.score
      // this.startTemplateDialog = true;
      this.form.name = rowData.name
      this.form.status = rowData.status
      this.form.illustration = rowData.illustration
      this.$confirm('确定启用模板吗？', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        showCancelButton: false,
      })
        .then(() => {
          this.startTemplateDoMethod()
        })
        .catch((action) => {})
    },
    templateUiMethod(rowData) {
      //修改名称UI
      this.title = '修改模板'
      this.id = rowData.id
      this.templateDialog = true
      this.form.name = rowData.name
      this.form.status = rowData.status
      this.form.illustration = rowData.illustration
    },
    deleteTemplateUiMethod(rowData) {
      //删除模板UI
      // this.deleteTemplateDialog = true
      this.id = rowData.id
      this.$confirm('确认删除模板吗？', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        showCancelButton: false,
      })
        .then(() => {
          this.deleteTemplateDoMethod()
        })
        .catch((action) => {})
    },
    stopTemplateUiMethod(rowData) {
      //停用模板UI
      // this.stopTemplateDialog = true
      this.id = rowData.id
      this.form.name = rowData.name
      this.form.status = rowData.status
      this.form.illustration = rowData.illustration
      this.$confirm('确认停用模板吗？', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        showCancelButton: false,
      })
        .then(() => {
          this.stopTemplateDoMethod()
        })
        .catch((action) => {})
    },

    startTemplateDoMethod() {
      //启用模板
      // this.startTemplateDoMethodEnable=true;
      // this.startTemplateDialog = false;
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplate/expand/modifytemplate',
        data: {
          id: this.id,
          name: this.form.name,
          illustration: this.form.illustration,
          status: 1,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.searchList()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            // this.startTemplateDoMethodEnable=false;
          }
        })
        .catch((error) => {})
    },
    deleteTemplateDoMethod() {
      //删除模板
      // this.deleteTemplateDoMethodEnable=true;
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplate/expand/daletetemplate',
        data: { id: this.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '操作成功',
            })
            this.searchList()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.deleteTemplateDoMethodEnable = false
          }
        })
        .catch((error) => {})

      // this.deleteTemplateDialog = false;
    },
    stopTemplateDoMethod() {
      //停用模板
      // this.stopTemplateDoMethodEnable=true;
      // this.stopTemplateDialog = false;
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplate/expand/modifytemplate',
        data: {
          id: this.id,
          name: this.form.name,
          illustration: this.form.illustration,
          status: 0,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.searchList()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            // this.stopTemplateDoMethodEnable=false;
          }
        })
        .catch((error) => {})
    },

    toDetail(rowData) {
      this.$router.push({
        path: '/home/checkAffairs/checkTemplateDetailTwo',
        name: 'checkTemplateDetailTwo',
        query: {
          id: rowData.id,
          name: rowData.name,
          status: rowData.status,
          isThisLevel: rowData.isThisLevel,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/checkAffairs/checkTemplate',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    saveInfo() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveInfoEnable = true
          var url = '',
            dataParas = {}
          if (this.id == '') {
            url = 'api-gov/assesstemplate/expand/createtemplate'
            dataParas = {
              name: this.form.name,
              illustration: this.form.illustration,
            }
          } else {
            url = 'api-gov/assesstemplate/expand/modifytemplate'
            dataParas = {
              id: this.id,
              name: this.form.name,
              illustration: this.form.illustration,
              status: this.form.status,
            }
          }
          this.axios({
            method: 'post',
            url: url,
            data: dataParas,
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                this.searchList()
                this.saveInfoEnable = false
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
                this.saveInfoEnable = false
              }
            })
            .catch((error) => {})

          this.templateDialog = false
        } else {
        }
      })
    },
    cancelForm() {
      this.$refs['form'].resetFields()
      this.templateDialog = false
    },
  },
}
</script>
<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font-weight: bold;
  font-size: 18px;
  line-height: 67px;
  color: #333;
  .saveBtn {
    margin-right: 24px;
    margin-top: 15.5px;
  }
}
.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
</style>
